<!--
 * @Author: chengxinwei 499449221@qq.com
 * @Date: 2024-10-10 14:26:48
 * @LastEditors: chengxinwei 499449221@qq.com
 * @LastEditTime: 2024-11-06 18:11:09
 * @FilePath: /web/src/views/indexPage/quality.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: chengxinwei 499449221@qq.com
 * @Date: 2024-10-09 17:06:41
 * @LastEditors: chengxinwei 499449221@qq.com
 * @LastEditTime: 2024-10-10 11:09:23
 * @FilePath: /web/src/components/lineChart/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="quality-info">
    <el-row>
      <el-col :span="16">
        
        
        <div class="record">
          <div class="top">
            <div class="left">
              <img src="../../assets/images/kuohao.png" alt="" />
            </div>
            <div class="right">
              <img src="../../assets/images/u193.svg" alt="" />
            </div>
            <div class="text">原材料进场记录</div>
          </div>
          <rollTable :data-list="rawMaterialList" @rowClick="handleOpenCheck" :option="rawMaterialOption"
            style="max-height: 260px">
            <template #materialCode="{ row }">
                <div style="color:rgb(0,255,255);cursor:pointer;">
                  {{ row.materialCode }}
                </div>
              </template>
          </rollTable>
        </div>
        <div class="record">
          <div class="top">
            <div class="left">
              <img src="../../assets/images/kuohao.png" alt="" />
            </div>
            <div class="right">
              <img src="../../assets/images/u193.svg" alt="" />
            </div>
            <div class="text">半成品生产记录</div>
            <div class="pro-type" :style="proTypeStyle">
              <el-button v-for="(item, index) in nameList" :key="index" :type="prodType == item.code ? 'primary' : ''"
                @click="changeType(item.code)" size="mini">
                {{ item.name }}
              </el-button>
            </div>
            <!-- </el-radio-group> -->
          </div>
          <rollTable @rowClick="handleOpenProduct" :data-list="productList" :option="productOption"
            style="max-height: 240px">
            <template #prodCode="{ row }">
                <div :style="row.image ? 'color:rgb(0,255,255);cursor:pointer;' : 'color:rgb(0,255,255);cursor:pointer;'">
                  {{ row.prodCode }}
                </div>
              </template>
          </rollTable>
        </div>
        <div class="record">
          <div class="top">
            <div class="left">
              <img src="../../assets/images/kuohao.png" alt="" />
            </div>
            <div class="right">
              <img src="../../assets/images/u193.svg" alt="" />
            </div>
            <div class="text">  半成品检验记录</div>
             <div class="pro-type" :style="proTypeStyle">
              <el-button v-for="(item, index) in nameList" :key="index" :type="prodType1 == item.code ? 'primary' : ''"
                @click="changeType1(item.code)" size="mini">
                {{ item.name }}
              </el-button>
            </div>
          </div>
          <rollTable :data-list="materialList"  @rowClick="handleOpenCheck1" :option="materialOption" style="max-height: 260px">
          </rollTable>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="mid">
          <div class="plan" style="margin-left: -1%">
            <div class="title">
              <img src="../../assets/images/u39.svg" alt="" />
              <div class="statistics">物料库存趋势图</div>
              <el-date-picker class="date" v-model="dateRange" size="mini" style="width: 240px"
                value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期"
                end-placeholder="结束日期" @change="handleChangeDataRange"></el-date-picker>
            </div>
            <lineChart class="lineChart" :lineChart="lineChart" :height="lineChartHieght"></lineChart>
          </div>
        </div>
        <div class="mid">
          <div class="plan" style="margin-left: -1%">
            <div class="title">
              <img src="../../assets/images/u39.svg" alt="" />
              <div class="statistics">物料消耗趋势图</div>
              <el-date-picker class="date" v-model="dateRange1" size="mini" style="width: 240px"
                value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期"
                end-placeholder="结束日期" @change="handleChangeDataRange1"></el-date-picker>
            </div>

            <lineChart :lineChart="lineChart1" :height="lineChartHieght2"></lineChart>
          </div>
        </div>
      </el-col>
      
    </el-row>

    <el-dialog :title="'产品详情'" :visible.sync="productVisable" width="80%" top="5vh" class="quality-info-dialog"
      append-to-body>
      <el-descriptions title="产品详情" style="height: 500px" column="3">
        <el-descriptions-item label="产品编号">kooriookami</el-descriptions-item>
        <el-descriptions-item label="产品类型" span="2">钢拱架</el-descriptions-item>
        <el-descriptions-item label="工字钢类型">苏州市</el-descriptions-item>
        <el-descriptions-item label="弧长"> 111 </el-descriptions-item>
        <el-descriptions-item label="弦高"> 111 </el-descriptions-item>
        <el-descriptions-item label="生产时间"> 2024.10.25 16：26 </el-descriptions-item>
        <el-descriptions-item label="产品类型" span="2"> 生产员 </el-descriptions-item>
        <el-descriptions-item label="产品图片" span="3"><img
            src="http://8.130.75.109:9001/steel-arch/2024/10/23/u385_20241023113422.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=PUAH2MasnNKQwr0P%2F20241023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20241023T033422Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=4dfc4bd85050377961588f16f0dba20e8d2af2be4862f2f4c20dded9fb67b48d" /></el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <el-dialog :title="'材料进场记录'" :visible.sync="recordVisable" width="80%" top="5vh" class="quality-info-dialog"
      append-to-body>
      <el-table :data="recordData" @row-click="handleOpenInfo" :header-cell-style="thStyleFun" :cell-style="cellStyleFun" class="main-table">
          <el-table-column label="序号" type="index" width="50"></el-table-column>
          <el-table-column label="进场单号" prop="code"></el-table-column>
          <el-table-column label="生产厂家" prop="issueUnitName"></el-table-column>
          <el-table-column label="数量" width="100" prop="actualCount"></el-table-column>
          <el-table-column label="材料名称" width="130" prop="materialName"></el-table-column>
          <el-table-column label="规格型号"  prop="spec"></el-table-column>
          <el-table-column label="计量单位" width="100" prop="unitName"></el-table-column>
          <el-table-column label="是否抽检" width="100" prop="checked">
            <!-- <template slot-scope="scoped">
              <span v-if="scoped.row.checked==0">是</span>
              <span v-if="scoped.row.checked==1">是</span>
            </template> -->
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>

    <el-dialog :title="'原材料详情'" :visible.sync="checkVisable" width="80%" top="5vh" class="quality-info-dialog"
      append-to-body>

      <el-descriptions :column="4">
        <el-descriptions-item label="材料名称">
          <div style="width:50px">{{ rawMaterialRow.materialName }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="规格型号">
          <div >{{ rawMaterialRow.spec }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="是否抽检" > 是 </el-descriptions-item>

        <el-descriptions-item label="数量">{{ rawMaterialRow.actualCount }}</el-descriptions-item>
        <el-descriptions-item label="用途">{{ rawMaterialRow.materialName=='工字钢'?'隧道初支':rawMaterialRow.materialUsage }}</el-descriptions-item>
        <el-descriptions-item label="生产批号">{{ rawMaterialRow.code== "收-01#-202411-0002"?'SZ20241106001':rawMaterialRow.batchNumber}}</el-descriptions-item>
        <el-descriptions-item label="生产厂家">{{ rawMaterialRow.issueUnitName }}</el-descriptions-item>
        <el-descriptions-item label="进场单号">{{ rawMaterialRow.code }}</el-descriptions-item>
        <el-descriptions-item label="进场时间" span="4">{{ rawMaterialRow.enterTime }}</el-descriptions-item>

        <el-descriptions-item label="进场图片" :span="4"><div class="inImg">
          <el-image style="width:20%;" v-if="rawMaterialRow.imageLinkList"
            v-for="image in rawMaterialRow.imageLinkList" :preview-src-list='rawMaterialRow.imageLinkList' :src="image" />
        </div></el-descriptions-item>
        <el-descriptions-item label="外委检测报告" :span="4">
          <span style="color: #55c2ff; margin-left: 20px;cursor: pointer;" v-for="(item,index) in rawMaterialRow.reportLinkList" @click="openPdf(item)" :key="index">{{ item.name }}</span>  
        </el-descriptions-item>
        <el-descriptions-item label="备注" :span="4">{{  rawMaterialRow.remark }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <el-dialog :title="'半成品检验记录'" :visible.sync="checkVisable1" width="60%" top="5vh" class="quality-info-dialog"
      append-to-body>
      <div class='record-check'>
        <div class='record-check-left'>
          <div class='record-check-title'></div>
          <div class='record-check-title'>材料规格</div>
          <div class='record-check-title' v-if="type=='ggj'">弦长</div>
          <div class='record-check-title' v-if="type=='ggj'">弦高</div>
          <div class='record-check-title' v-if="type=='ggj'">半径</div>
          <div class='record-check-title' v-if="type=='wp'">长</div>
          <div class='record-check-title' v-if="type=='wp'">宽</div>
          <div class='record-check-title' v-if="type=='ljg'">长</div>
          <div class='record-check-title' v-if="type=='ljg'">宽</div>
          <div class='record-check-title' v-if="type=='ljg'">厚</div>
          <div class='record-check-title' v-if="type=='xdg'" label="" prop="">长</div>
          <div class='record-check-title' v-if="type=='xdg'" label="" prop="">止浆段长度</div>
        </div>
        <div class='record-check-left'>
          <div  class='record-check-title'>
            设计参数
          </div>
          <div class='record-check-title' v-if="type=='ggj'">{{rawMaterialRow.steel}}</div>
          <div class='record-check-title' v-if="type=='ggj'">{{rawMaterialRow.arcLength}}</div>
          <div class='record-check-title' v-if="type=='ggj'">{{rawMaterialRow.height}}</div>
          <div class='record-check-title' v-if="type=='ggj'">{{rawMaterialRow.radius}}</div>
          <div class='record-check-title' v-if="type=='wp'">{{rawMaterialRow.rebarSpecifications}}</div>
          <div class='record-check-title' v-if="type=='wp'">{{rawMaterialRow.arcLength}}</div>
          <div class='record-check-title' v-if="type=='wp'">{{rawMaterialRow.prodWide}}</div>
          <div class='record-check-title' v-if="type=='ljg'">{{rawMaterialRow.steelPlateSpecifications}}</div>
          <div class='record-check-title' v-if="type=='ljg'">{{rawMaterialRow.arcLength}}</div>
          <div class='record-check-title' v-if="type=='ljg'">{{rawMaterialRow.prodWide}}</div>
          <div class='record-check-title' v-if="type=='ljg'">{{rawMaterialRow.proThick}}</div>
          <div class='record-check-title' v-if="type=='ljg'">{{rawMaterialRow.conduitSpecifications}}</div>
          <div class='record-check-title' v-if="type=='xdg'" label="" prop="">{{rawMaterialRow.arcLength}}</div>
          <div class='record-check-title' v-if="type=='xdg'" label="" prop="">{{rawMaterialRow.prodLong}}</div>
        </div>
        <div class='record-check-left'>
          <div  class='record-check-title'>
            实测参数
          </div>
          <div class='record-check-title' v-if="type=='ggj'">{{rawMaterialRow.steel}}</div>
          <div class='record-check-title' v-if="type=='ggj'">{{rawMaterialRow.realArcLength}}</div>
          <div class='record-check-title' v-if="type=='ggj'">{{rawMaterialRow.realHeight}}</div>
          <div class='record-check-title' v-if="type=='ggj'">{{rawMaterialRow.realRadius}}</div>
          <div class='record-check-title' v-if="type=='wp'">{{rawMaterialRow.rebarSpecifications}}</div>
          <div class='record-check-title' v-if="type=='wp'">{{rawMaterialRow.realArcLength}}</div>
          <div class='record-check-title' v-if="type=='wp'">{{rawMaterialRow.realProdWide}}</div>
          <div class='record-check-title' v-if="type=='ljg'">{{rawMaterialRow.steelPlateSpecifications}}</div>
          <div class='record-check-title' v-if="type=='ljg'">{{rawMaterialRow.realArcLength}}</div>
          <div class='record-check-title' v-if="type=='ljg'">{{rawMaterialRow.realProdWide}}</div>
          <div class='record-check-title' v-if="type=='ljg'">{{rawMaterialRow.realroThick}}</div>
          <div class='record-check-title' v-if="type=='ljg'">{{rawMaterialRow.conduitSpecifications}}</div>
          <div class='record-check-title' v-if="type=='xdg'" label="" prop="">{{rawMaterialRow.realArcLength}}</div>
          <div class='record-check-title' v-if="type=='xdg'" label="" prop="">{{rawMaterialRow.realProdLong}}</div>
        </div>
        <div class='record-check-left'>
          <div  class='record-check-title'>
            检验日期
          </div>
          <div class='record-check-title' v-if="type=='ggj'">{{rawMaterialRow.checkTime}}</div>
        </div>
        <div class='record-check-left'>
          <div  class='record-check-title'>
            检验结论
          </div>
          <div class='record-check-title' v-if="type=='ggj'">{{rawMaterialRow.pass}}</div>
        </div>
      </div>
      <!-- <el-descriptions column="3">
        <el-descriptions-item label="生产批号">
          <div style="width:150px">{{ rawMaterialRow.batchCode }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="产品类型">
          <div >{{ rawMaterialRow.prodType }}</div>
        </el-descriptions-item>
        <el-descriptions-item v-if="type=='ggj'" label="弦长" >{{ rawMaterialRow.arcLength }}</el-descriptions-item>
        <el-descriptions-item v-if="type=='ggj'" label="弦高" >{{ rawMaterialRow.height }}</el-descriptions-item>
        <el-descriptions-item v-if="type=='ggj'" label="半径" >{{ rawMaterialRow.radius }}</el-descriptions-item>
        <el-descriptions-item v-if="type=='ggj'" label="实测-弧长" >{{ rawMaterialRow.realArcLength }}</el-descriptions-item>
        <el-descriptions-item v-if="type=='ggj'" label="实测-弦高" >{{ rawMaterialRow.realHeight }}</el-descriptions-item>
        <el-descriptions-item v-if="type=='ggj'" label="实测-半径" >{{ rawMaterialRow.realRadius }}</el-descriptions-item>
        <el-descriptions-item v-if="type=='ggj'" label="工字钢规格" >{{ rawMaterialRow.steel }}</el-descriptions-item>
        
        <el-descriptions-item v-if="type=='wp'" label="长" >{{ rawMaterialRow.arcLength }}</el-descriptions-item>
        <el-descriptions-item v-if="type=='wp'" label="宽" >{{ rawMaterialRow.prodWide }}</el-descriptions-item>
        <el-descriptions-item v-if="type=='wp'" label="钢筋规格" >{{ rawMaterialRow.radius }}</el-descriptions-item>
        <el-descriptions-item v-if="type=='wp'" label="实测-长" >{{ rawMaterialRow.realArcLength }}</el-descriptions-item>
        <el-descriptions-item v-if="type=='wp'" label="实测-宽" >{{ rawMaterialRow.realProdWide }}</el-descriptions-item>
        <el-descriptions-item v-if="type=='ljg'" label="长" prop="">{{rawMaterialRow.arcLength}}</el-descriptions-item>
          <el-descriptions-item v-if="type=='ljg'" label="宽" prop="">{{rawMaterialRow.arcLength}}</el-descriptions-item>
          <el-descriptions-item v-if="type=='ljg'" label="厚" prop="">{{rawMaterialRow.proThick}}</el-descriptions-item>
          <el-descriptions-item v-if="type=='ljg'" label="实测-长" prop="">{{rawMaterialRow.realArcLength}}</el-descriptions-item>
          <el-descriptions-item v-if="type=='ljg'" label="实测-宽" prop="">{{rawMaterialRow.realProdWide}}</el-descriptions-item>
          <el-descriptions-item v-if="type=='ljg'" label="实测-厚" prop="">{{rawMaterialRow.realProThick}}</el-descriptions-item>
          <el-descriptions-item v-if="type=='ljg'" label="钢板规格" prop="">{{rawMaterialRow.steelPlateSpecifications}}</el-descriptions-item>

        <el-descriptions-item v-if="type=='xdg'" label="长" prop="">{{rawMaterialRow.arcLength}}</el-descriptions-item>
          <el-descriptions-item v-if="type=='xdg'" label="止浆段长度" prop="">{{rawMaterialRow.prodLong}}</el-descriptions-item>
          <el-descriptions-item v-if="type=='xdg'" label="实测-止浆段长度" prop="">{{rawMaterialRow.realProdLong}}</el-descriptions-item>
          <el-descriptions-item v-if="type=='xdg'" label="小导管规格" prop="">{{rawMaterialRow.conduitSpecifications}}</el-descriptions-item>
          <el-descriptions-item label="检验日期" prop="">{{rawMaterialRow.checkTime}}</el-descriptions-item>
          <el-descriptions-item label="检验数量" prop="">{{rawMaterialRow.finishNum}}</el-descriptions-item>
          <el-descriptions-item label="检验是否合格" span="3" prop="">
            {{rawMaterialRow.pass}}
          </el-descriptions-item>

        <el-descriptions-item label="检验图片" span=""><img v-if="rawMaterialRow.image"
            :src="rawMaterialRow.image" /></el-descriptions-item>
      </el-descriptions> -->
    </el-dialog>
    <el-dialog
        :title="openModelTitle"
        :visible.sync="openModel"
        width="80%"
        class="model-dialog"
        append-to-body
      >
      <div class="title">半成品生产记录</div>
        <!-- <div class="top" v-if="typeName == '钢拱架'">
          <div>产品编号：{{ rowInfo.prodCode }}</div>
          <div>规格：{{ rowInfo.steel }}</div>
          <div>弧长：{{ rowInfo.arcLength }}</div>
          <div>半径：{{ rowInfo.bj }}</div>
          <div>弦高：{{ rowInfo.height }}</div>
        </div>
        <div class="top" v-if="typeName == '网片'">
          <div>产品编号：{{ rowInfo.prodCode }}</div>
          <div>钢筋规格：{{ rowInfo.rebarSpecifications }}</div>
          <div>长：{{ rowInfo.arcLength }}</div>
          <div>宽：{{ rowInfo.prodWide }}</div>
        </div>
        <div class="top" v-if="typeName == '小导管'">
          <div>产品编号：{{ rowInfo.prodCode }}</div>
          <div>长：{{ rowInfo.arcLength }}</div>
          <div>小导管规格：{{ rowInfo.conduitSpecifications }}</div>
          <div>止浆段长度：{{ rowInfo.prodLong }}</div>
        </div>
        <model style="height: calc(100vh - 400px);" :path="openModelUrl"></model> -->
        <el-table :data="tableData" :header-cell-style="thStyleFun" :cell-style="cellStyleFun" class="main-table">
          <el-table-column label="序号" type="index" width="50px"></el-table-column>
          <el-table-column label="材料批次" prop="batchCode"></el-table-column>
          <el-table-column label="生产日期" prop="madeDate"></el-table-column>
           <el-table-column label="生产数量" prop="finishNum"></el-table-column>
          <!-- <el-table-column label="操作" width="100px">
            <template slot-scope="scope">
              <el-link type="primary" @click="handleEdit(scope.row)" :underline="false">编辑</el-link>
              <el-link type="primary" @click="handleOpen(scope.row)" :underline="false">原材料溯源</el-link>
            </template>
          </el-table-column> -->
        </el-table>
        <span slot="footer" class="dialog-footer"> </span>
      </el-dialog>
  </div>
</template>

<script>
import pieChart from "../../components/pieChart/index.vue";
import lineChart from "../../components/lineChart/index.vue";
import rollTable from "../../components/RollTable/index.vue";
import {
  ggjColumn,
  wpColumn,
  xdgColumn,
  ljgColumn,
  ggjColumn1,
  wpColumn1,
  xdgColumn1,
  ljgColumn1,
} from "./productionConfig.js";
import { getInChart, getOutChart } from "../../api/newBigScreen";
import { getProdList1,getByBatchCode,getInProdList } from "@/api/bigScreen.js";
import rollList from "../../components/RollTable/index.vue";
import { getprolist, getList } from "../../api/product";
import {
  getInList,
  getCheckList
} from "@/api/bigScreen.js";
import dayjs from "dayjs";
import model from "./model.vue";
export default {
  components: {
    pieChart,
    lineChart,
    rollTable,
    rollList,
    model
  },
  data() {
    return {
      lineChartHieght: "330px",
      lineChartHieght2: "330px",
      proTypeStyle: "",
      productVisable: false,
      checkVisable: false,
      checkVisable1: false,
      openModel: false,
      openModelTitle: "",
      openModelUrl: "",
      recordVisable:false,
      rowInfo:'',
      typeName:'',
      materialOption: {
        height: 195,
      },
      rawMaterialOption: {
        height: 195,
        column: [
          {
            prop: "index",
            width: 50,
            label: "序号",
          },
          {
            prop: "materialCode",
            width: 180,
            label: "物料编码",
          },
          {
            prop: "materialName",
            width: 280,
            label: "物料类型",
          },
          {
            prop: "materialNum",
            width: 110,
            label: "单据数量",
          },
        ],
      },
      productInfo: {},
      chartData: [
        {
          name: "钢拱架产线",
          value: 8,
        },
        {
          name: "小导管产线",
          value: 8,
        },
        {
          name: "网片产线",
          value: 8,
        },
        {
          name: "连接钢板产线",
          value: 8,
        },
      ],
      lineChart: {
        title: "",
        name: ["物料1", "物料2", "物料3", "物料4"],
        categories: [
          "2024/8/23",
          "2024/8/24",
          "2024/8/25",
          "2024/8/26",
          "2024/8/27",
          "2024/8/28",
          "2024/8/29",
        ],
        values: [],
      },
      lineChart1: {
        title: "",
        name: ["物料1", "物料2", "物料3", "物料4"],
        categories: [
          "2024/8/23",
          "2024/8/24",
          "2024/8/25",
          "2024/8/26",
          "2024/8/27",
          "2024/8/28",
          "2024/8/29",
        ],
        values: [],
      },
      productOption: {
        height: 220,
        column: [],
      },
      productList: [],
      materialList: [],
      rawMaterialList: [],
      input3: "",
      dateRange: [],
      dateRange1: [],
      nameList: [],
      prodType: "",
      prodType1: "",
      type:'',
      rawMaterialRow: {},
      tableData:[],
      recordData:[]
    };
  },
  created() {
    
  },
  mounted() {
    this.dateRange = [
      dayjs().subtract(7, "day").format("YYYY-MM-DD"),
      dayjs().format("YYYY-MM-DD"),
    ];
    this.dateRange1 = [
      dayjs().subtract(7, "day").format("YYYY-MM-DD"),
      dayjs().format("YYYY-MM-DD"),
    ];
    this.changeType("ggj");
    this.changeType1("ggj");
    this.getInChartData();
    this.getOutChartData();
    this.getprolist();
    this.getProductList();
    // this.getMaterialList();
    this.getRawMaterialList();
  },
  methods: {
    openPdf(item){
      console.log(item)
      window.open(item.response.data)
    },
    getprolist() {
      getprolist().then((res) => {
        if (res.success == true) {
          this.nameList = res.data;
          this.prodType = this.nameList[0].code;
          var width = this.nameList.length * 72.5;
          this.proTypeStyle = "margin-left:calc( 100% - " + width + "px)";
        }
      });
    },
    changeType(type) {
      // console.log(type)
      this.type = type;
      this.prodType = type
      switch (type) {
        case "ggj":
          this.typeName = "钢拱架";
          this.productOption.column = ggjColumn;
          this.materialOption.column = ggjColumn1;
          break;
        case "wp":
          this.typeName = "网片";
          this.productOption.column = wpColumn;
          this.materialOption.column = wpColumn1;
          break;
        case "xdg":
          this.typeName = "小导管";
          this.productOption.column = xdgColumn;
          this.materialOption.column = xdgColumn1;
          break;
        case "ljg":
          this.typeName = "连接钢板";
          this.productOption.column = ljgColumn;
          this.materialOption.column = ljgColumn1;
          break;
        default:
          break;
      }
      let flag = false
      let flag1 = false
      let flag2 = false
      this.productOption.column.map(item=>{
        if(item.label=='数量'){
          flag=true
        }
        if(item.label=='生产批号'){
          flag1=true
        }
        if(item.label=='生产时间'){
          flag2=true
        }
      })
      if(!flag){
        this.productOption.column.push({
          prop: "finishNum",
          width: 70,
          label: "数量",
        })
      }
      
      this.productOption.colum=[...new Set(this.productOption.colum)]
      const { projectId } = this.$store.getters;
      getProdList1({ prodType: type,projectId }).then((res) => {
        this.productList = res.data;
        this.productList.map((item,i)=>{
          item.index = i+1
        })
      });
      
    },
     changeType1(type) {
      // console.log(type)
      this.type = type;
      this.prodType1= type
      switch (type) {
        case "ggj":
          this.materialOption.column = ggjColumn1;
          break;
        case "wp":
          this.materialOption.column = wpColumn1;
          break;
        case "xdg":
          this.materialOption.column = xdgColumn1;
          break;
        case "ljg":
          this.materialOption.column = ljgColumn1;
          break;
        default:
          break;
      }
      const { projectId } = this.$store.getters;
      const parmas = {
        projectId: projectId,
        prodType: type,
      };
      getCheckList({prodType: type}).then(res => {
         
        if (res.data) {
          res.data.forEach((element,i) => {
            element.pass = element.pass == 0 ? "合格" : "不合格"
            element.index= i+1
          });
        }
        this.materialList = res.data
      })
      
    },
    handleOpenCheck(row) {
      
      this.recordVisable = true
      getInProdList({materialCode:row.materialCode}).then(res => {
        if (res.data) {
          res.data.forEach((element,i) => {
            element.index = i+1
            element.checked = element.checked == 0 ? "是" : "是"
          });
        }
        this.recordData = res.data
      })
    },
    handleOpenInfo(row){
      console.log(row)
      this.checkVisable = true;
      if(row.qualificationLink){
        row.qualificationLinkList = row.qualificationLink.split(',')
      }
      if(row.imageLink){
        row.imageLinkList = row.imageLink.split(',')
      }
      if(row.reportLink){
        row.reportLinkList = JSON.parse(row.reportLink)
      }
      this.rawMaterialRow = row
    },
    handleOpenCheck1(row) {
      this.checkVisable1= true;
      // if(row.qualificationLink){
      //   row.qualificationLinkList = row.qualificationLink.split(',')
      // }
      // if(row.imageLink){
      //   row.imageLinkList = row.imageLink.split(',')
      // }
      // if(row.reportLink){
      //   row.reportLinkList = row.reportLink.split(',')
      // }
      this.rawMaterialRow = row
    },
    handleOpenProduct(row) {
      // if (!row.image) return;
      
      getByBatchCode({prodId:row.id}).then((res) => {
        this.tableData = res.data.data
        console.log(this.tableData)
        this.openModel = false;
        this.openModelTitle = row.prodCode;
        this.openModel = true;
        this.rowInfo = row
        this.openModelUrl = row.image;
      });
    },
    getInChartData() {
      let parmars = {
        beginTimeFormat: this.dateRange[0],
        endTimeFormat: this.dateRange[1],
      };
      getInChart(parmars).then((res) => {
        this.lineChart.name = res.data.legend.data;
        this.lineChart.categories = res.data.xAxis.data.reverse();
        res.data.series.map((item) => {
          this.lineChart.values.push(item.data);
        });
      });
    },
    getOutChartData() {
      let parmars = {
        beginTimeFormat: this.dateRange1[0],
        endTimeFormat: this.dateRange1[1],
      };
      getOutChart(parmars).then((res) => {
        this.lineChart1.name = res.data.legend.data;
        this.lineChart1.categories = res.data.xAxis.data.reverse();0
        res.data.series.map((item) => {
          this.lineChart1.values.push(item.data);
        });
      });
    },
    handleChangeDataRange() {
      this.getInChartData();
    },
    handleChangeDataRange1() {
      this.getOutChartData();
    },
    getProductList() {
      
    },
    getMaterialList() {
      getCheckList().then(res => {
        if (res.data) {
          res.data.forEach(element => {
            element.checkResult = element.checkResult == 0 ? "合格" : "不合格"
          });
        }
        this.materialList = res.data
      })

      // this.materialList = [
      //   {
      //     pc: "JY20240903004",
      //     sl: "30",
      //     jcr: "张三",
      //     sj: "2024.09.03  13：26",
      //     jg: "正常",
      //   },
      //   {
      //     pc: "JY20240903004",
      //     sl: "30",
      //     jcr: "张三",
      //     sj: "2024.09.03  13：26",
      //     jg: "正常",
      //   },
      //   {
      //     pc: "JY20240903004",
      //     sl: "30",
      //     jcr: "张三",
      //     sj: "2024.09.03  13：26",
      //     jg: "正常",
      //   },
      //   {
      //     pc: "JY20240903004",
      //     sl: "30",
      //     jcr: "张三",
      //     sj: "2024.09.03  13：26",
      //     jg: "正常",
      //   },
      //   {
      //     pc: "JY20240903004",
      //     sl: "30",
      //     jcr: "张三",
      //     sj: "2024.09.03  13：26",
      //     jg: "正常",
      //   },
      //   {
      //     pc: "JY20240903004",
      //     sl: "30",
      //     jcr: "张三",
      //     sj: "2024.09.03  13：26",
      //     jg: "正常",
      //   },
      //   {
      //     pc: "JY20240903004",
      //     sl: "30",
      //     jcr: "张三",
      //     sj: "2024.09.03  13：26",
      //     jg: "正常",
      //   },
      // ];
    },
    getRawMaterialList() {
      getInList().then(res => {
        if (res.data) {
          res.data.forEach((element,i) => {
            element.index = i+1
            element.checked = element.checked == 0 ? "是" : "是"
          });
        }
        this.rawMaterialList = res.data
      })
    },
    // 设置表格内容居中
thStyleFun() {
    return 'text-align:center;color:#fff;font-weight: bold;background-color: transparent;'
 },
 // 设置表格内容字体颜色
cellStyleFun() {
    return 'text-align:center;font-size: 14px;color:#55C2FF'
},
    queryProductInfo() {
      var input3 = this.input3;
      if (input3 === "" || input3 === undefined || input3 === null) {
        this.$message.error("请输入产品编号！");
      } else {
        this.productInfo = {
          code: "GGJ20240903020",
          type: "钢拱架",
          scy: "张三",
          scrq: "2024-09-03 15:26",
        };
      }
    },
    clearProductCode() {
      this.productInfo = {};
    },
    // changeType(code) {
    //   this.prodType = code;
    //   this.getProductList();
    // },
    isObjectEmpty(obj) {
      return (
        Object.prototype.toString.call(obj) === "[object Object]" &&
        Object.keys(obj).length === 0
      );
    },
  },
};
</script>
<style lang="scss" scoped>

.ku {
  position: relative;
  margin-left: 4%;
  width: 70%;

  img {
    width: 100%;
    height: 120px;
  }

  .text {
    position: absolute;
    color: white;
    top: 30px;
    left: 20px;
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    margin-left: 50px;
    display: flex;
    width: 100%;
  }

  .day {
    margin: 0 70px;
    font-size: 36px;
    color: #ff9900;
  }

  .shu {
    margin-left: 20%;

    .more {
      display: flex;

      img {
        width: 10px;
        height: 22px;
        margin-top: 5px;
      }
    }
  }

  .column {
    font-weight: 700;
    font-style: normal;
    font-size: 28px;
    color: #2de9db;
    margin-top: 10px;
  }
}

.mid {
  margin-top: 20px;
  margin-left: 0%;
  height: 440px;

  .plan {
    width: 90%;
    border: 1px solid rgba(2, 231, 243, 1);
    position: relative;
    height: 400px;

    .date {
      position: absolute;
      right: 30px;
      line-height: 40px !important;
      height: 40px;
      top: 20px;
      background: transparent;
    }

    .el-input__inner {
      background-color: transparent !important;
      /* 将背景色改为红色 */
    }

    ::v-deep .el-range-input {
      background-color: transparent !important;
      /* 将背景色改为红色 */
      color: #00ffff;
    }

    .right {
      color: white;
      position: absolute;
      top: 10px;
      right: 10px;
      font-weight: bold;

      .yellow {
        color: #fccd1d;
      }
    }
  }

  .title {
    position: relative;
    height: 70px;

    .statistics {
      top: 6px;
      left: 10px;
      font-weight: 700;
      font-style: normal;
      font-size: 18px;
      color: #01f7fd;
      position: absolute;
    }
  }

  .progress {
    margin-left: 20px;
    margin-top: 20px;
    position: relative;
    height: 50px;

    .left {
      background-color: rgba(252, 205, 29, 0.3);
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
      width: 100px;
      height: 50px;
      position: absolute;
      left: 0;
      top: 0;
    }

    .right1 {
      border-top: 50px solid rgba(252, 205, 29, 0.3);
      /* 梯形的高度 */
      border-right: 25px solid transparent;
      /* 右边斜面的宽度 */
      height: 0;
      width: 40px;
      /* 梯形的宽度 */
      position: absolute;
      left: 100px;
      top: 0px;
    }

    .blue {
      border-bottom: 40px solid rgba(1, 247, 253, 0.5);
      /* 梯形的高度 */
      border-left: 20px solid transparent;
      /* 右边斜面的宽度 */
      height: 0;
      width: 40px;
      /* 梯形的宽度 */
      position: absolute;
      left: 121px;
      top: 4px;
    }

    .blue1 {
      background-color: rgba(1, 247, 253, 0.5);
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
      width: 70%;
      height: 40px;
      position: absolute;
      left: 161px;
      top: 4px;
    }

    .text {
      position: absolute;
      top: 10px;
      left: 10px;
      font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
      font-weight: 700;
      font-style: normal;
      font-size: 20px;
      color: #fccd1d;
    }

    .middle {
      display: flex;
      position: absolute;
      left: 160px;
      top: 15px;
    }

    .line {
      height: 20px;
      width: 5px;
      border-radius: 3px;
      background: white;
      margin-right: 8px;
    }

    .yellow {
      color: #fccd1d;
    }

    .total {
      position: absolute;
      right: 10%;
      top: 13px;
      font-size: 18px;
      color: white;
      font-weight: bold;
    }
  }
}

.waring {
  width: 82%;
  height: 220px;
  margin-left: 11%;
  margin-top: 20px;
  overflow: hidden;
  overflow-y: scroll;

  .redline {
    width: 98%;
    background: rgb(144, 65, 73);
    color: white;
    border-radius: 5px;
    height: 32px;
    line-height: 32px;
    margin-top: 10px;
    display: flex;
    align-content: center;
    font-size: 16px;
    font-weight: bold;
    padding-left: 10px;
  }

  .yellowline {
    width: 98%;
    background: rgb(179, 115, 34);
    color: white;
    border-radius: 5px;
    height: 32px;
    line-height: 32px;
    margin-top: 10px;
    display: flex;
    align-content: center;
    font-size: 16px;
    font-weight: bold;
    padding-left: 10px;
  }
}

.pro-type {
  margin-top: 5px;
  height: 30px;
  line-height: 30px;
  display: flex;
  align-items: center;
  position: absolute;
  justify-content: center;

  .el-button.el-button--primary {
    color: #ffffff;
    background-color: rgb(5, 85, 108);
    border-color: rgb(5, 85, 108);
  }

  .el-button:hover {
    color: rgb(5, 85, 108);
  }

  .el-button.el-button--primary:hover {
    color: #ffffff;
  }

  .el-button {
    color: #ffffff;
    background-color: rgb(170, 170, 170);
    border: none;
    height: 22px;
    line-height: 0.8;
  }
}

.record {
  margin-left: 4%;
  width: 90%;
  margin-top: 20px;

  .top {
    display: flex;
    position: relative;
    margin-bottom: 5px;

    .tab {
      position: absolute;
      right: 40px;
      top: 2px;

      .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        width: 40px;
        padding: 2px 8px;
      }
    }

    .left {
      position: absolute;
      left: -10px;
      top: 0px;

      img {
        width: 30px;
        height: 40px;
      }
    }

    .right {
      width: 100%;
      img {
        margin-top: 5px;
        width: 100%;
        height: 30px;
      }
    }

    .text {
      position: absolute;
      left: 30px;
      top: 8px;
      font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
      font-weight: 700;
      font-style: normal;
      font-size: 18px;
      color: #00ffff;
    }
  }
}

.box {
  width: 100%;
  margin-top: 20px;
  margin-left: 2%;
  padding: 20px;
  display: flex;

  .introduce {
    width: 30%;
    font-size: 18px;
    color: #02a7f0;
    border: 1px solid #fff;
    padding: 10px;
  }

  .right {
    width: 500px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    div {
      width: 250px;

      img {
        width: 248px;
        height: 140px;
      }
    }
  }
}

.list {
  width: 96%;
  margin-left: 2%;
  max-height: 200px;
  margin-top: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  overflow-y: scroll;

  .top {
    color: #fccd1d;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    background-color: rgb(8, 54, 78);
    padding: 5px 20px;
    margin-top: 20px;
  }

  .item {
    color: white;
    display: flex;
    justify-content: space-between;
    background-color: rgb(8, 54, 78);
    padding: 5px 20px;
    margin-top: 20px;
  }

  .search {
    background-color: rgba(2, 141, 159, 1);
    padding: 10px;
    border-radius: 5px;
    display: flex;
  }

  .info {
    background-color: rgb(8, 54, 78, 1);
    padding: 15px 10px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;

    div {
      display: flex;
    }

    .line {
      margin-top: 10px;
    }

    .name {
      color: #fccd1d;
    }
  }
}
::v-deep .el-dialog{
    background-color: rgba(19, 43, 82, 0.7);
  }
  .el-dialog {
  color: white;
  
}
::v-deep .el-dialog__title {
    color: #fff;
  }
  .model-dialog div {
  color: white;

  .title {
    font-size: 18px;
    margin: 2vh 0;
    font-weight: bold;
  }

  .top {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    div {
      width: 33%;
      display: flex;
      height: 50px;
    }
  }

  .text {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 2vh;
  }

  .btn {
    width: 100%;
    display: flex;
    justify-content: center;

    button {
      width: 120px;
    }
  }
}
  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
  .record-check{
    width:80%;
    color:#fff;
    .record-check-left{
      margin-bottom:20px;
      display:flex;
      width:100%;
      justify-content:flex-start;
      .record-check-title{
        width:20%
      }
    }

  }
</style>
<style lang="scss">
.quality-info-dialog {
  .el-descriptions__body {
    background-color: rgba(19, 43, 82, 1);
    color: #fff;
  }

  .el-form-item__content {
    color: #fff;
  }

  .el-form-item__label {
    color: #fff;
  }

  .el-descriptions-item__label {
    width: 100px;
  }

  .el-dialog {
    background-color: rgba(19, 43, 82, 1);
  }

  .el-dialog__title {
    color: #fff;
  }

  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
}
/* 表格内背景颜色 */
 .el-table th,
 .el-table tr,
 .el-table td {
  background-color: transparent;
}

 .el-table td.el-table__cell,
 .el-table th.el-table__cell.is-leaf {
  border-bottom: 0;
}


.el-table--enable-row-transition .el-table__body td.el-table__cell {
  background-color: transparent !important;
}
.el-table td.el-table__cell div.cell {
  background-color: transparent !important;
}
 .el-table {
  background-color: transparent !important;
}

 .el-table__row {
  background-color: transparent ;
}
/* 去除底部白线 */
 .el-table::before{
    background-color: transparent;
  }
  .inImg{
    display: flex;
    justify-content: space-around;
  }
</style>
